import React, {useState, useEffect, useRef} from "react";
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {faEdit, faTimes, faTrash} from "@fortawesome/free-solid-svg-icons"
import {faMarkdown} from "@fortawesome/free-brands-svg-icons";
import PropTypes from 'prop-types'
import './FileList.css'
import useKeyPress from "../hooks/useKeyPress";


const FileList = ({files, onFileClick, onSaveEdit, onFileDelete}) => {
    const [editStatus, setEditStatus] = useState(false)
    const [value, setValue] = useState('')

    const closeSearch=()=>{
        setEditStatus(false)
        setValue('')

    }

    const enterPressed = useKeyPress(13)
    const escPressed = useKeyPress(27)

    useEffect(() => {
        if (enterPressed && editStatus) {
                    const editItem=files.find(file=>file.id==editStatus)
                    onSaveEdit(editItem.id,value)
        }

        if (escPressed && editStatus) {
            closeSearch()
        }




        // const handleInputEvent = (event) => {
        //     const {keyCode} = event
        //     if (keyCode === 13 && editStatus) {
        //         const editItem=files.find(file=>file.id==editStatus)
        //         onSaveEdit(editItem.id,value)
        //
        //     } else if (keyCode === 27 && editStatus) {
        //         closeSearch(event)
        //     }
        // }
        // document.addEventListener('keyup', handleInputEvent)
        // return () => {
        //     document.removeEventListener('keyup', handleInputEvent)
        // }
    })







    return (
        <ul className="list-group list-group-flush file-list">
            {
                files.map(file => (
                    <li className="list-group-item row bg-light d-flex align-items-center file-item"
                        key={file.id}
                    >
                        {
                            (file.id != editStatus) &&
                            <>
                        <span className="col-2">
                            <FontAwesomeIcon
                                size='lg'
                                icon={faMarkdown}/>
                        </span>
                                <span
                                    onClick={() => {
                                        onFileClick(file.id)
                                    }}
                                    className="col-6 c-link">{file.title}</span>
                                <button
                                    type="button"
                                    className="icon-button col-2"
                                    onClick={() => {
                                        onFileClick(file.id)
                                    }}
                                >
                                    <FontAwesomeIcon
                                        title="编辑"
                                        size='lg'
                                        icon={faEdit}
                                        onClick={() => {
                                            setEditStatus(file.id)
                                            setValue(file.title)
                                        }}

                                    />
                                </button>
                                <button
                                    type="button"
                                    className="icon-button col-2"
                                    onClick={() => {
                                        onFileDelete(file.id)
                                    }}
                                >
                                    <FontAwesomeIcon
                                        title="删除"
                                        size='lg'
                                        icon={faTrash}

                                    />
                                </button>
                            </>
                        }


                        {
                            (file.id == editStatus)
                            &&
                            <>
                                <input
                                    className="form-control col-10"
                                    value={value}
                                    onChange={(e) => {
                                        setValue(e.target.value)
                                    }
                                    }
                                />
                                <button
                                    type="button"
                                    size='lg'
                                    className="icon-button col-2"
                                    onClick={closeSearch}
                                >
                                    <FontAwesomeIcon
                                        icon={faTimes}
                                        size='lg'
                                        title="关闭"
                                    />
                                </button>
                            </>
                        }
                    </li>
                ))
            }

        </ul>


    )


}
FileList.prototypes = {
    files: PropTypes.array,
    onFileClick: PropTypes.func,
    onFileDelete: PropTypes.func
}


export default FileList

